<template>
  <div>
    <p v-if="show">哈哈</p>
    <p v-else>呵呵</p>
    <button @click="show = !show">修改</button>
  </div>
</template>

<script>
  export default {
    name: 'Media',
    data() {
      return {
        show: true,
      };
    },
  };
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
